<template>
    <div class="large-right3" @click="openChild">
        <div class="panel-title right-title">
            <div class="panel-title-box">
                <img class="panel-title-ico" src="@/assets/large/panel-title-ico.png" />
                营销分析
            </div>
            <img class="panel-title-bg" src="@/assets/large/panel-title.png" />
        </div>
        <!-- <div class="data-select-parent">
            <a-select class="large-select" v-model="couponCode">
                <a-select-option value="活动1">活动1</a-select-option>
                <a-select-option value="活动2">活动2</a-select-option>
                <a-select-option value="活动3">活动3</a-select-option>
            </a-select>
        </div> -->
        <div>
            <div class="left-box">
                <div style="position:relative;margin:10px 0">
                    <img class="center-bg-img" src="@/assets/large/right3-left.png" />
                    <div id="right3Chart1"></div>
                </div>
                <div>
                    <div class="leg-list">
                        <span class="leg-lab-total"></span>
                        <span>发放数量</span>
                        <span class="leg-num" style="color:rgba(58, 211, 193, 1)">
                            <NumberAnimation :num="statistics.issueQuantity" :decimal="0"/>
                        </span>
                    </div>
                    <div class="leg-list">
                        <span class="leg-lab"
                            :style="`background: linear-gradient(90deg, ${color1[0]}, 1) 0%, ${color1[0]}, 0.1) 100%)`"></span>
                        <span>已领取</span>
                        <span class="leg-num" :style="'color:'+color1[0]+',1)'">
                            <NumberAnimation :num="statistics.receivedQuantity" :decimal="0"/>
                        </span>
                    </div>
                    <div class="leg-list">
                        <span class="leg-lab"
                            :style="`background: linear-gradient(90deg, ${color1[1]}, 1) 0%, ${color1[1]}, 0.1) 100%)`"></span>
                        <span>未领取</span>
                        <span class="leg-num" :style="'color:'+color1[1]+',1)'">
                            <NumberAnimation :num="statistics.unreceivedQuantity" :decimal="0"/>
                        </span>
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div style="position:relative;margin:10px 0">
                    <img class="center-bg-img" src="@/assets/large/right3-right.png" />
                    <div id="right3Chart2"></div>
                </div>
                <div>
                    <div class="leg-list">
                        <span class="leg-lab"
                            :style="`background: linear-gradient(90deg, ${color2[0]}, 1) 0%, ${color2[0]}, 0.1) 100%)`"></span>
                        <span>已使用</span>
                        <span class="leg-num" :style="'color:'+color2[0]+',1)'">
                            <NumberAnimation :num="statistics.usedQuantity" :decimal="0"/>
                        </span>
                    </div>
                    <div class="leg-list">
                        <span class="leg-lab"
                            :style="`background: linear-gradient(90deg, ${color2[1]}, 1) 0%, ${color2[1]}, 0.1) 100%)`"></span>
                        <span>未使用</span>
                        <span class="leg-num" :style="'color:'+color2[1]+',1)'">
                            <NumberAnimation :num="statistics.unusedQuantity" :decimal="0"/>
                        </span>
                    </div>
                </div>
            </div>

        </div>
        <Right3childVue :visible="childVisible" @closeModal="() => childVisible = false" v-if="childVisible"/>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { echartLoad, toDecimalNoZero } from "@/utils";
import Right3childVue from "../child/right3child.vue";
@Component({
    name: "home",
    components: { Right3childVue },
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch("pageData")
    pageDataChange() {
        this.setPageData();
    }
    couponCode = "活动1";
    dataList1: any[] = [
        { name: "已领取", val: 300 },
        { name: "未领取", val: 150 },
    ];
    dataList2: any[] = [
        { name: "已使用", val: 100 },
        { name: "未使用", val: 150 },
    ];
    chart1: any = null;
    chart2: any = null;
    setAngleArr(list) {
        let totalValue = list.reduce((total, item) => total + item.val, 0);
        let cacheNum = 0;
        const newArr: any[] = [];
        list.forEach((item) => {
            item.numArr = [cacheNum, cacheNum + item.val];
            item.angleArr = [(cacheNum / totalValue) * Math.PI * 2, ((cacheNum + item.val) / totalValue) * Math.PI * 2];
            cacheNum += item.val;
            newArr.push(item);
        });
        return newArr;
    }
    statistics={}
    mounted() {
        this.setPageData()
    }
    setPageData() {
        if (!this.pageData || !this.pageData.statistics) return;
        const statistics=this.pageData.statistics
        this.statistics=statistics
        this.dataList1 = [
            { name: "已领取", val: statistics.receivedQuantity },
            { name: "未领取", val: statistics.unreceivedQuantity },
        ];
        this.dataList2 = [
            { name: "已使用", val: statistics.usedQuantity },
            { name: "未使用", val: statistics.unusedQuantity },
        ];
        this.dataList1 = this.setAngleArr(this.dataList1);
        this.dataList2 = this.setAngleArr(this.dataList2);
        echartLoad(() => {
            this.setChart();
        });
    }

    childVisible = false;
    openChild() {
        this.childVisible = true;
    }

    beforeDestroy() {
        this.timer && clearInterval(this.timer);
    }
    chartAnimation() {
        this.chart1.dispose()
        this.chart2.dispose()

        this.initChart()
    }
    timer: any = null;
    setChart() {
        if (this.chart1) {
            this.resetChart();
        } else {
            this.initChart();
            // 启动定时器（每 10 秒切换一次）
            this.timer = setInterval(this.chartAnimation, 21000);

            // // 鼠标悬停时暂停自动切换
            this.chart1.on("mouseover", () => clearInterval(this.timer));
            this.chart1.on("mouseout", () => {
                this.timer = setInterval(this.chartAnimation, 21000);
            });
            this.chart2.on("mouseover", () => clearInterval(this.timer));
            this.chart2.on("mouseout", () => {
                this.timer = setInterval(this.chartAnimation, 21000);
            });
        }
    }
    resetChart() {
        const options = this.chart1.getOption();
        options.series = this.getSeries1(false);
        this.chart1.setOption(options, true);
    }
    initChart() {
        const chartDom1 = document.getElementById("right3Chart1");
        const chartDom2 = document.getElementById("right3Chart2");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options1: any = {
            legend: {
                show: false,
            },
            tooltip: {
                trigger: "item",
            },
            series: this.getSeries1(false),
        };
        const options2: any = {
            legend: {
                show: false,
            },
            tooltip: {
                trigger: "item",
            },
            series: this.getSeries2(false),
        };
        if (chartDom1) {
            this.chart1 = window.echarts.init(chartDom1 as HTMLDivElement);
            this.chart1.setOption(options1);
        }
        if (chartDom2) {
            this.chart2 = window.echarts.init(chartDom2 as HTMLDivElement);
            this.chart2.setOption(options2);
        }
    }
    color1 = ["rgba(235,108,72", "rgba(50,139,201"];
    color2 = ["rgba(9,204,165", "rgba(117,178,221"];
    getSeries1(type) {
        return [
            {
                name: "",
                type: "pie",
                radius: ["64%", "84%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                padAngle: 2,
                itemStyle: {
                    borderRadius: 2,
                },
                label: {
                    show: false,
                    position: "center",
                },

                labelLine: {
                    show: false,
                },
                data: type
                    ? []
                    : this.dataList1.map((item, idx) => {
                          return {
                              value: item.val,
                              name: item.name,
                              itemStyle: {
                                  color: this.color1[idx] + ",1)",
                              },
                          };

                          // return {
                          //     value: item.val,
                          //     name: item.name,
                          //     itemStyle: {
                          //         color: {
                          //             ...this.getCoordinates(item.angleArr[0], item.angleArr[1]),
                          //             type: "linear",
                          //             colorStops: [
                          //                 {
                          //                     offset: 0,
                          //                     color: this.color1[idx] + ",0.1)", // 0%处的颜色
                          //                 },
                          //                 {
                          //                     offset: 1,
                          //                     color: this.color1[idx] + ",1)", // 100%处的颜色
                          //                 },
                          //             ],
                          //         },
                          //     },
                          // };
                      }),
            },
        ];
    }
    getSeries2(type) {
        return [
            {
                name: "",
                type: "pie",
                radius: ["64%", "84%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                padAngle: 2,
                itemStyle: {
                    borderRadius: 2,
                },
                label: {
                    show: false,
                    position: "center",
                },

                labelLine: {
                    show: false,
                },
                data: type
                    ? []
                    : this.dataList2.map((item, idx) => {
                          return {
                              value: item.val,
                              name: item.name,
                              itemStyle: {
                                  color: this.color2[idx] + ",1)",
                              },
                          };
                          // return {
                          //     value: item.val,
                          //     name: item.name,
                          //     itemStyle: {
                          //         color: {
                          //             ...this.getCoordinates(item.angleArr[0], item.angleArr[1]),
                          //             type: "linear",
                          //             colorStops: [
                          //                 {
                          //                     offset: 0,
                          //                     color: this.color2[idx] + ",0.1)", // 0%处的颜色
                          //                 },
                          //                 {
                          //                     offset: 1,
                          //                     color: this.color2[idx] + ",1)", // 100%处的颜色
                          //                 },
                          //             ],
                          //         },
                          //     },
                          // };
                      }),
            },
        ];
    }

    getCoordinates(startArc: number, endArc: number) {
        const posi = [Math.sin(startArc), -Math.cos(startArc), Math.sin(endArc), -Math.cos(endArc)];
        const dx = posi[2] - posi[0];
        const dy = posi[3] - posi[1];
        return this.getLocation(dx, dy);
    }
    getLocation(dx: number, dy: number) {
        const tanv = dx / dy;
        const directSign = Math.abs(tanv) < 1;
        const t = directSign ? tanv : 1 / tanv;
        const sign1 = t > 0 ? 1 : -1;
        const sign2 = dx > 0 ? 1 : -1;
        const sign = directSign ? sign1 * sign2 : sign2;
        const group1 = [0.5 - (sign * t) / 2, 0.5 + (sign * t) / 2];
        const group2 = sign > 0 ? [0, 1] : [1, 0];
        const group = [...group1, ...group2];
        const keys = directSign ? ["x", "x2", "y", "y2"] : ["y", "y2", "x", "X2"];
        let res: any = {};
        keys.forEach((k, idx) => {
            res[k] = group[idx];
        });
        return res;
    }
}
</script>
<style lang="scss">
.large-right3 {
    width: 100%;
    .left-box {
        width: 50%;
        position: relative;
        display: inline-block;
    }
    #right3Chart1 {
        width: 100%;
        height: 12vh;
    }
    #right3Chart2 {
        width: 100%;
        height: 12vh;
    }
    .center-bg-img {
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
         box-shadow: 0 0 5px 2px rgba(58, 211, 193, 1);
        border-radius: 100%;
        animation: centerBgAnimation 1.5s linear infinite alternate ;
    }

    .right-box {
        width: 50%;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .leg-list {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1px 10px;
        margin: 0 auto;
        margin-bottom: 4px;
        width: 16vh;
    }
    .leg-list:last-child {
        margin-bottom: 0;
    }
    .leg-num {
        font-size: 18px;
        font-weight: bold;
        margin-left: 10px;
    }
    .leg-lab {
        width: 20px;
        height: 10px;
        display: inline-block;
        margin-right: 5px;
        border-radius: 2px;
    }
    .leg-lab-total {
        height: 10px;
        width: 10px;
        background-color: rgba(58, 211, 193, 1);
        border-radius: 10px;
        display: inline-block;
        margin: 0 5px;
    }
    .data-select-parent {
        padding-left: 30px;
    }
}
@keyframes centerBgAnimation {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}
</style>
